<template>
    <div :class="`tech-page-empty ${mode} ${isFullPage ? 'full-page' : ''} ${isTransparent ? 'is-transparent' : ''}`">
        <img v-if="type === 'normal'" class="empty-img" src="@assets/icon/empty.svg" alt="暂无数据">
        <img v-else-if="type === 'location'" class="empty-location-img" src="@assets/icon/location.png" alt="暂无数据">
        <img v-else-if="type === 'discount'" class="empty-location-discount" src="@assets/icon/discount_empty.png" alt="暂无数据">
        <img v-else-if="type === 'order'" class="empty-location-order" src="@assets/icon/order.png" alt="暂无订单">
        <span class="empty-msg">{{msg}}</span>
    </div>
</template>

<script>
export default {
    name: 'empty',
    props: {
        msg: {
            type: String,
            default: '暂无数据',
        },
        type: {
            type: String,
            default: 'normal', // normal，location，order, discount
        },
        mode: {
            type: String,
            value: 'white',
        },
        isFullPage: {
            type: Boolean,
            default: false,
        },
        isTransparent: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

<style lang="less">
    @empty-icon-size: 80px;
    .tech-page-empty {
        width: 100%;
        height: 100%;
        min-height: 50vh;
        background-color: @white;
        &.black {
            background-color: @black-bg-color;
        }
        &.full-page {
            height: 100vh;
        }
        &.is-transparent {
            background-color: transparent !important;
        }
        .flex-column-center();
        .empty-img {
            width: @empty-icon-size;
            height: @empty-icon-size;
        }
        .empty-location-img {
            width: 200px;
        }
        .empty-location-discount {
            width: 200px;
        }
        .empty-location-order {
            width: 200px;
        }
        .empty-msg {
            color: @gray-darker;
            .font-size();
            .m-t(@gap-md);
        }
    }
</style>
